import {BrowserRouter as Router,Routes,Route,Link} from 'react-router-dom';
import React, { useState,useEffect } from 'react';

function Index(){
    useEffect(()=>{
        console.log('你来了Index页面')
        return ()=>{
            console.log('你离开了了Index页面')
        }
    },[])
    return <h2>JSPang.com</h2>
}
function List(){
    useEffect(()=>{
        console.log('你来了List页面')
        return ()=>{
            console.log('你离开了了List页面')
        }
    },[])
    return <h2>List Page</h2>
}


function Example4(){
    const[count,setCount]=useState(0)
    useEffect(()=>{
        console.log(`number${count}`)
        return ()=>{
            console.log('=======')
        }
    },[count])
    return(
        <div>
            <p>You click {count} times</p>
            <button onClick={()=>{setCount(count+1)}}>Click me</button>

            <Router>
                <ul>
                    <li><Link to="/">首页</Link></li>
                    <li><Link to="/list/">标签</Link></li>
                </ul>
                <Routes>
                    <Route path="/" exact element={<Index/>} />
                    <Route path="/list/" element={<List/>} />
                </Routes>
            </Router>
        </div>
    )
}
export default Example4;